<template>
 <div>
<ul class="goods-list">
<li class="goods-item" v-for="(item,i) in goodslist" :key="item.url" @click="getdetial(i+1)">
<img v-lazy="item.url" alt="">
<h3 class="title" >小米(Mi)小米Note 16G全网通</h3>
<div>
    <p class="price">
        <span class="now">￥2999</span>
        <span class="old">￥1999</span>
    </p>
    <p class="sell">
        <span >热卖中</span>
        <span >剩余{{item.publishedAt}}件</span>
    </p>
</div>
</li>



</ul>
<mt-button  id="jzgd" size="large" type="danger" @click="getMore" >加载更多</mt-button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      pageindex: 1,
      goodslist: []
    };
  },

  created() {
    this.getgoodslist();
  },

  methods: {
    getdetial(id) {
      // console.log(this)
      //最简单的
      // this.$router.push("/home/goodslist/goodsinfo/" + id);
      // this.$router.push({ path:"/home/goodslist/goodsinfo/" + id});
      this.$router.push({ name: "GoodsInfo", params: { id: id } });
    },

    getMore() {
      this.pageindex++;
      this.getgoodslist();
    },

    getgoodslist() {
      this.$http
        .get("https://www.apiopen.top/meituApi?page=" + this.pageindex)
        .then(res => {
          if (res.status == 200) {
            this.goodslist = this.goodslist.concat(res.body.data);
            var ran = Math.floor(Math.random() * 1 + 2);
            this.goodslist.forEach(item => {
              item.publishedAt = item.createdAt.substr(20, ran);
            });
            console.log(this.goodslist);
          }
        });
    }
  }
};
</script>


 




<style lang="less">
#jzgd {
  margin-bottom: 80px;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 8px;

  li {
    padding: 0;
    list-style: none;
    position: relative;
  }

  .goods-item {
    width: 49%;
    box-sizing: border-box;
    border: solid 1px #ccc;
    box-shadow: 0 0 8px #ccc;
    margin-bottom: 8px;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 293px;

    .price {
      .now {
        color: red;
        font-weight: 600;
      }
      span:last-child {
        text-decoration: line-through;
        font-size: 12px;
        margin-left: 10px;
      }
    }

    .sell {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }

    p {
      padding: 5px 0;
      margin: 0;
      padding: 0 2px;
      background-color: #eee;
    }

    h3 {
      font-size: 14px;
      padding: 0 2px;
    }

    img {
      width: 100%;
    }
  }
}
</style>
